<template>
    <el-table :data="tableData" style="width: 100%" height="100%">
        <el-table-column 
            v-for="column in columnList"
            :key="column.prop"
            v-bind="column.columnAttrs"
        >
            <template slot-scope="scope">
                <slot
                    v-if="column.type === 'slot'"
                    :name="column.slotName"
                    :row="scope.row"
                ></slot>
                <components
                    v-else
                    :row="scope.row"
                    :prop="column.prop"
                    :config="column"
                    :is="`column-${column.type}`"
                ></components>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
const modules = {};
const files = require.context("./modules",true,'/index.vue$/')
files.keys().forEach((item) => {
    const name = item.split("/")[1];
    modules[`column-${name}`] = files(item).default
})
export default {
        components: {
            ...modules
        },
        props: {
            tableData: {
                type: Array,
                default: ()=>[]
            },
            columnList: {
                type: Array,
                default: ()=> []
            },
        },
        created() {
            this.getData();
        },
    }
</script>

<style lang="scss" scoped>

</style>